<template>
  <el-form class="order_search" inline>
    <el-form-item>
      <el-select
        v-model="query.bc_type"
        style="width: 200px; height: 32px"
        @change="changebctype"
        placeholder="选择平台"
      >
        <el-option label="全部" value="all" />
        <el-option v-for="(item, index) in bc_types" :key="index" :label="item.name" :value="item.bc_type" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select v-model="query.check_status" style="width: 200px; height: 32px" placeholder="结算状态">
        <el-option label="未结算" :value="0" />
        <el-option label="已结算" :value="1" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select v-model="query.place_status" style="width: 200px; height: 32px" placeholder="下单状态">
        <el-option label="下单失败" :value="0" />
        <el-option label="下单成功" :value="2" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select v-model="query.is_win" style="width: 200px; height: 32px" placeholder="输赢">
        <el-option label="全部" value="all" />
        <el-option label="输" :value="0" />
        <el-option label="赢" :value="1" />
      </el-select>
    </el-form-item>
    <el-form-item>
      <el-select v-model="query.user_name" style="width: 200px; height: 32px" placeholder="账号">
        <el-option label="全部" value="all" />
        <el-option
          v-for="(item, index) in usernames"
          :key="index"
          :label="item.user_name"
          :value="item.user_name"
        />
      </el-select>
    </el-form-item>
    <div style="display: inline-block;">
      <el-form-item style="margin-top: 16px">
        <div :class="rangeTime == 'benzhou' ? 'activerange' : 'range'" @click="clickrangetime('benzhou')">
          本周
        </div>
      </el-form-item>
      <el-form-item style="margin-top: 16px">
        <div :class="rangeTime == 'shangzhou' ? 'activerange' : 'range'" @click="clickrangetime('shangzhou')">
          上周
        </div>
      </el-form-item>
      <el-form-item style="margin-top: 16px">
        <div :class="rangeTime == 'benyue' ? 'activerange' : 'range'" @click="clickrangetime('benyue')">
          本月
        </div>
      </el-form-item>
      <el-form-item style="margin-top: 16px">
        <div :class="rangeTime == 'shangyue' ? 'activerange' : 'range'" @click="clickrangetime('shangyue')">
          上月
        </div>
      </el-form-item>
      <el-form-item style="margin-top: 16px">
        <el-date-picker
          v-model="timerange"
          type="daterange"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="YYYY-MM-DD"
          format="YYYY-MM-DD"
        />
      </el-form-item>
    </div>

    <el-form-item style="margin-top: 16px">
      <el-button type="primary" class="hovepcvicecolor" @click="orderSearch">查询</el-button>
    </el-form-item>
    <el-form-item style="margin-top: 16px">
      <el-button @click="orderReset">重置</el-button>
    </el-form-item>
    <el-form-item style="margin-top: 16px">
      <el-button @click="saveExell">导出</el-button>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { inject, onMounted } from 'vue'
import { http } from '@/utils/http'

// import { ipcRenderer } from 'electron';
const emits = defineEmits()
const props = defineProps({
  query: Object,
})
const bc_types = inject('bc_types')
const usernames = inject('usernames')
const rangeTime = inject('rangeTime')
const timerange = inject('timerange')

const orderSearch = () => {
  emits('change')
}


const orderReset = () => {
  props.query.bc_type = 'all'
  props.query.is_win = 'all'
  props.query.check_status = 0
  props.query.place_status = 2
  emits('change')
}

const saveExell = () => {
  emits('getExell')
}

const changebctype = () => {
  let bctype = ''
  if (props.query.bc_type == 'all') {
    bctype = ''
  } else {
    bctype = props.query.bc_type
  }
  http.get(`/member/member_list?page=1&page_size=999&bc_type=${bctype}`).then(res => {
    usernames.value = res.data.list
    props.query.user_name = 'all'
    console.log(usernames.value)
  })
}

const clickrangetime = value => {
  if (rangeTime.value != value) {
    rangeTime.value = value
  }
  const today = new Date()
  let a
  if (value == 'benzhou') {
    a = getWeekRange(today)
  } else if (value == 'shangzhou') {
    a = getLastWeekRange(today)
  } else if (value == 'benyue') {
    a = getMonthRange(today)
  } else if (value == 'shangyue') {
    a = getLastMonthRange(today)
  }
  props.query.begin_time = a.start
  props.query.end_time = a.end
  
  timerange.value = [a.start, a.end]
}

// 格式化日期为 YYYY-MM-DD
const formatDate = date => {
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  return `${year}-${month}-${day}`
}

// 获取本周的开始日期（周一）和结束日期（今天）
const getWeekRange = date => {
  const dayOfWeek = date.getDay() // 获取今天是周几
  const diffToMonday = dayOfWeek === 0 ? -6 : 1 - dayOfWeek // 计算到周一的差值
  const monday = new Date(date)
  monday.setDate(date.getDate() + diffToMonday) // 本周一

  return {
    start: formatDate(monday),
    end: formatDate(date), // 结束日期为今天
  }
}

// 获取本月的开始日期和结束日期（今天）
const getMonthRange = date => {
  const start = new Date(date.getFullYear(), date.getMonth(), 1) // 本月第一天

  return {
    start: formatDate(start),
    end: formatDate(date), // 结束日期为今天
  }
}

// 获取上周的开始日期（周一）和结束日期（上周日）
const getLastWeekRange = date => {
  const dayOfWeek = date.getDay()
  const diffToLastMonday = dayOfWeek === 0 ? -13 : -6 - dayOfWeek // 计算到上周一的差值
  const lastMonday = new Date(date)
  lastMonday.setDate(date.getDate() + diffToLastMonday) // 上周一

  const lastSunday = new Date(lastMonday)
  lastSunday.setDate(lastMonday.getDate() + 6) // 上周日

  return {
    start: formatDate(lastMonday),
    end: formatDate(lastSunday),
  }
}

// 获取上月的开始日期和结束日期（上月最后一天）
const getLastMonthRange = date => {
  const lastMonthStart = new Date(date.getFullYear(), date.getMonth() - 1, 1) // 上月第一天
  const lastMonthEnd = new Date(date.getFullYear(), date.getMonth(), 0) // 上月最后一天

  return {
    start: formatDate(lastMonthStart),
    end: formatDate(lastMonthEnd),
  }
}
</script>

<style lang="scss" scoped>
.activerange {
  font-size: 14px;
  cursor: pointer;
  color: var(--pcvice-color);
}
.range {
  font-size: 14px;
  cursor: pointer;
  color: #252a30;
}
</style>

<style>
.order_search .el-form-item {
  margin-right: 8px;
  margin-bottom: 0;
}


</style>